<script setup lang="ts">
import { onHide, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
import { useCountdown } from '@/hooks/useCountdown';
import { useUserStore } from '@/store/userStore';
import { IS_DEV } from '@/utils';
import { isEmpty } from '@/utils/is.utils';
import { maskName } from '@/utils/mask.utils';
import { getUrlObj } from '@/utils/router.utils';

const props = withDefaults(defineProps<{
  showBack?: boolean
  backHome?: boolean
  backPrev?: boolean
  countdown?: number
}>(), {
  backHome: false,
  backPrev: true,
  showBack: true,
  countdown: 120
});

const { userInfo } = storeToRefs(useUserStore());

const { remaining, start, stop } = useCountdown(props.countdown, {
  onComplete() {
    if (!IS_DEV) {
      useUserStore().resetAuth();
    }
    console.log('>>>>倒计时结束');
  }
});

function resetCountdown() {
  start(props.countdown);
}

function goHome() {
  // 获取上一个页面
  // 如果上一个页面是首页 使用 navigateBack 否则使用 redirectTo
  const prevPage = getCurrentPages().slice(-2)[0];
  const prevRoute = (prevPage as any)?.$page;

  const { path } = getUrlObj(prevRoute?.fullPath || '');

  if (path === '/pages/index/index') {
    return goBack();
  }

  uni.redirectTo({
    url: '/pages/index/index'
  });
}

function goBack() {
  uni.navigateBack({
    delta: 1
  });
}

function handleBack() {
  if (props.backHome) {
    goHome();
    return;
  }
  goBack();
}

function handleLogout() {
  useUserStore().handleLogout().then(() => {
    uni.showToast({
      title: '退出成功',
      icon: 'success',
      duration: 2000
    });
  });
}

onMounted(() => {
  resetCountdown();
});

onShow(() => {
  resetCountdown();
});

onHide(() => {
  stop();
});
</script>

<template>
  <view class="auth-bar flex items-center px-50 pr-30">
    <view v-if="showBack" class="auth-bar__left">
      <slot>
        <view class="auth-bar__back flex-center" @click="handleBack">
          {{ backHome ? '返回首页' : '上一步' }}
        </view>
      </slot>
    </view>
    <view class="w-0 flex-1">
      <view v-if="!isEmpty(userInfo)" class="flex-center">
        <view class="auth-bar__user">
          欢迎您，{{ maskName(userInfo?.patientName) }}!
        </view>
        <view class="logout-btn" @click="handleLogout">
          退出
        </view>
      </view>
      <view v-else class="flex-center">
        <view class="auth-bar__user">
          请登录您的账号
        </view>
      </view>
    </view>
    <view class="auth-bar__time w-220">
      {{ remaining }}秒后自动退出
    </view>
  </view>
</template>

<style lang="scss" scoped>
.auth-bar {
  height: 120px;
  box-sizing: border-box;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(235, 243, 255, 0.2);

  .auth-bar__back {
    background: #fff;
    border-radius: 6px;
    color: var(--primary);
    width: 174px;
    height: 63px;
    font-size: 32px;
    font-weight: 600;
  }

  .auth-bar__user {
    font-size: 36px;
    font-weight: bold;
    color: var(--text-color);
  }

  .logout-btn {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 100px;
    width: 115px;
    height: 44px;
    color: var(--primary);
    box-sizing: border-box;
    font-size: 26px;
    font-weight: 500;
    border: 2px solid rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-left: 24px;
  }

  .auth-bar__time {
    font-size: 28px;
    color: var(--text-color);
  }
}
</style>
